
<template>
  <div id="app">
        <!-- 导航栏 -->
        <div class="navbar">
            <h1>{{ novelName }}</h1>
        </div>
     <div class="controls" >
      <label for="background-color" >背景颜色：</label>
      <input type="color" id="background-color" v-model="backgroundColor">
      <label for="font-size">字体大小：</label>
      <input type="number" id="font-size" v-model="fontSize" min="12" max="36">
        <select id="font-family" v-model="fontFamily">
        <option value="'Arial', sans-serif">Arial</option>
        <option value="'Times New Roman', serif">Times New Roman</option>
        <option value="'Courier New', monospace">Courier New</option>
        <option value="'Georgia', serif">Georgia</option>
       </select>
    </div>
        <!-- 主要内容区域 -->
        <div class="container">
            <div class="novel-container">
               <div>
                    <h4>第{{page}}章</h4>
              </div>
                <p v-html="formattedText" class="novel-paragraph"></p>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="footer">
            <p>© 2024 小说阅读</p>
        </div>
    </div>
</template>

<style >
.controls {
  margin-top: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
 input{
  width: 50px;
}
.controls label {
 margin-left: 20px;
}
.novel-paragraph {
  text-indent: 4em!important;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif; /* 使用适合阅读的字体 */
  font-size: 30px; /* 字体大小调整为适合阅读的尺寸 */
  line-height: 1.6; /* 设置合适的行高 */
    text-align: left; /* 设置文本左对齐 */


  color: #333; /* 文本颜色 */
  background-color: #fff; /* 背景颜色 */
  margin-bottom: 1em; /* 段落之间的间距 */
  padding: 4em; /* 段落内部的内边距 */
}
 body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 1500px;
            margin: 0 auto;
            padding: 20px;
        }
        .novel-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .novel-paragraph {
            margin-bottom: 20px;
            text-indent: 4em; /* 首行缩进 */

            line-height: 2; /* 行高 */
        }
        /* 导航栏样式 */
        .navbar {
            background-color: rgb(70,132,226);
            color: #fff;
            padding: 10px 20px;
        }
        .navbar h1 {
            margin: 0;
            font-size: 24px;
        }
        /* 页脚样式 */
        .footer {
            text-align: center;
            padding: 10px 0;
            color: #777;
            font-size: 14px;
        }
</style>
<script >
import axios from "axios";

export default {

  data() {
    return {
      novelName: undefined,
      category: undefined,
      novelContent:'',
      Chapters:[],
      page:0,
      form:[],
      Content:'',
        backgroundColor: '#fff', // 默认背景颜色为白色
      fontSize: 18, // 默认字体大小为18px
      fontFamily: "'Arial', sans-serif" // 默认字体为Arial
    }
  },
  mounted() {
    this.novelName = this.$route.params.novelName;
    this.page=this.$route.params.page;
    this.getNovelContent();

  },
  methods:{
    getNovelContent(){
      const formData = new FormData();
      formData.append('novelName', this.novelName);
       formData.append('page', this.page);

         axios.post('http://127.0.0.1:5000/v1/booksOnline/getContent',formData)
          .then(response => {
             if(response.status === 200){
              this.Content= response.data;
            }
            else {
              alert('no such book');
            }
          })
    },

    toLoginPage(){
      this.$router.push('/login')
    },
    onlineRead(){
      window.location.href = this.detailData.link;
    },


  },
  computed:{
     formattedText() {
      // 使用正则表达式将空格替换为换行符
     let formattedContent = this.Content.replace(/\s+/g, '<br>'); // 在 HTML 中使用 <br> 而不是 \n

        // 在每段文本的开头插入两个空格
        formattedContent = formattedContent.replace(/<br>/g, '<br>&nbsp;&nbsp;');

        return formattedContent;

    }
  }
}

</script>